<template>
  <div>
    <el-select v-model="data.selectValue">
      <el-option
        v-for="item in data.initOption"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { onMounted, reactive, ref , watch} from '@vue/composition-api';
export default {
  props:{
    config:{
      type:Object,
      default:()=> {}
    }
  },
  setup(props,{root}){
    const data = reactive({
      selectValue:'',
      initOption:[],
      option:[
        {value:"name",  label:'姓名'},
        {value:"phone",  label:'手机'},
        {value:"email",  label:'邮箱'}
      ]
    })


    let initOption = () => {
      let initData = props.config.init
      let optionArr = []
      if(initData.length === 0) {
        return false
      }
      initData.forEach(element => {
        let arr = data.option.filter(elem => elem.value == element)  //filter匹配成功后是一个数组
        if(arr.length == 0) {
          console.log("匹配数据为空");
          return false
        }
        optionArr.push(arr[0])
        // 初始化赋值
        data.initOption = optionArr
        // 初始化搜索类型
        data.selectValue = data.initOption[0].value
      });
    }

    onMounted(() => {
      initOption()
    })

    return {
      // reactive
      data,
      // methods 
      initOption
    }
  }
};
</script>

<style lang="scss" scoped></style>
